<template>
  <div class="exam-result-container">
    <el-card class="exam-card" shadow="hover">
      <h2 class="exam-title">考试结果</h2>

      <!-- 显示考试记录 -->
      <div v-if="examRecord" class="exam-details">
        <el-row :gutter="20">
          <el-col :span="12">
            <p><strong>考试名称:</strong> {{ examRecord.exam.name }}</p>
          </el-col>
          <el-col :span="12">
            <p><strong>得分:</strong> <span :class="scoreClass">{{ examRecord.score }}</span></p>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <p><strong>评价:</strong> <span>{{ examRecord.evaluation }}</span></p>
          </el-col>
          <el-col :span="12">
            <p><strong>提交时间:</strong> {{ examRecord.submitTime }}</p>
          </el-col>
        </el-row>

        <el-button type="primary" class="retry-button" @click="retryExam">退出考试</el-button>
      </div>

      <!-- 加载中的提示 -->
      <div v-else>
        <el-spin size="large"></el-spin>
        <p>正在加载考试结果...</p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {ref, onMounted, computed} from 'vue';
import axios from '@/utiles/axios';
import {useRoute} from 'vue-router';
import {ElCard, ElRow, ElCol, ElButton} from 'element-plus';
import router from "@/router/index.js";

const route = useRoute();
const examRecord = ref(null);
const examRecordId = route.params.examRecordId;  // 获取考试记录ID
const trainingPlanId = route.query.trainingPlanId;
  // 获取培训计划ID
console.log(trainingPlanId)
// 获取考试记录和成绩
const getExamRecord = async () => {
  try {
    const res = await axios.get(`/exams/record/${examRecordId}`);
    examRecord.value = res.data;
  } catch (error) {
    console.error('获取考试记录失败', error);
  }
};

// 根据分数设置样式
const scoreClass = computed(() => {
  if (examRecord.value) {
    const score = examRecord.value.score;
    if (score >= 90) return 'score-excellent';
    if (score >= 75) return 'score-good';
    if (score >= 60) return 'score-passing';
    return 'score-failed';
  }
  return '';
});

// 重新考试的函数
const retryExam = () => {
  // 跳转回任务点页面
  router.push(`/task/${trainingPlanId}`);
  console.log('退出考试');
};

onMounted(() => {
  getExamRecord();
});
</script>

<style scoped>
.exam-result-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background-color: #f4f6f9;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.exam-card {
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.exam-title {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  color: #4a90e2;
  margin-bottom: 20px;
}

.exam-details {
  font-size: 1.2em;
  color: #555;
}

.el-row {
  margin-bottom: 15px;
}

.el-col {
  display: flex;
  justify-content: space-between;
}

strong {
  color: #333;
}

.score-excellent {
  color: #4CAF50; /* 绿色 */
  font-weight: bold;
}

.score-good {
  color: #FFC107; /* 黄色 */
  font-weight: bold;
}

.score-passing {
  color: #FF9800; /* 橙色 */
  font-weight: bold;
}

.score-failed {
  color: #F44336; /* 红色 */
  font-weight: bold;
}

.retry-button {
  display: block;
  margin-top: 30px;
  width: 100%;
  font-size: 1.2em;
}

.el-spin {
  margin: 20px 0;
}

</style>
